<template>
    <div class="infomation3">
        <div class="container">
            <!-- 头部 -->
            <div class="header_box">
                <strong class="header_text">告诉我们你想要找什么样的工作</strong>
            </div>

            <!-- 内容主体 -->
            <div class="content">
                <!-- form表单部分 -->
                <div class="form">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label-width="0" size="medium" class="form_item" prop="career">
                            <el-select v-model="form.career" placeholder="请选择岗位" class="form_select">
                                <el-option 
                                v-for="item in carrerOptions"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="0" size="medium" class="form_item" prop="attribute">
                            <el-select v-model="form.attribute" placeholder="请选择工作属性" class="form_select">
                                <el-option 
                                v-for="item in attributeOptions"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 两个短的表单 -->
                        <div class="child_form">
                            <div class="child_left">
                                <el-form-item label-width="0" size="medium" prop="minSalary">
                                    <el-select v-model="form.minSalary" placeholder="请选择最低薪资" class="form_select">
                                        <el-option 
                                        v-for="item in minSalaryOptions"
                                        :key="item.id"
                                        :label="item.value" 
                                        :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div class="child_right">
                                <el-form-item label-width="0" size="medium" prop="maxSalary">
                                    <el-select v-model="form.maxSalary" placeholder="请选择最高薪资" class="form_select">
                                        <el-option 
                                        v-for="item in maxSalaryOptions"
                                        :key="item.id"
                                        :label="item.value" 
                                        :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                        <el-form-item label-width="0" size="medium" class="form_item" prop="area">
                            <el-select v-model="form.area" placeholder="请选择期望城市" class="form_select">
                                <el-option 
                                v-for="item in areaOptions"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="0" size="medium" class="form_item" prop="status">
                            <el-select v-model="form.status" placeholder="请选择当前状态" class="form_select">
                                <el-option 
                                v-for="item in statusOptions"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label-width="0" size="medium" class="form_item" prop="dutyTime">
                            <el-select v-model="form.dutyTime" placeholder="请选择到岗时间" class="form_select">
                                <el-option 
                                v-for="item in dutyTimeOptions"
                                :key="item.id"
                                :label="item.value" 
                                :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 按钮部分 -->
                <div class="btn_box">
                    <div class="left_btn"><button @click="jump_last()">上一步</button></div>
                    <div class="right_btn"><button @click="jump_next('form')">下一步</button></div>
                </div>
            </div>
            <!-- 文本跳转链接 -->
             <div class="link_text">
                <a href="">下载拉勾客户端，HR消息提醒更及时</a>
             </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/global.css"

export default {
    name: 'Infomation3',
    data() {
        return {
            form:{
                career:'',
                attribute:'',
                minSalary:'',
                maxSalary:'',
                area:'',
                status:'',
                dutyTime:'',
            },
            carrerOptions:[
                {id:1,value:"UI"},
                {id:2,value:"Java"},
                {id:3,value:"Python"},
                {id:4,value:"PHP"},
            ],
            attributeOptions:[
                {id:1,value:"全职"},
                {id:2,value:"兼职"},
            ],
            minSalaryOptions:[
                {id:1,value:"1k"},
                {id:2,value:"2k"},
                {id:3,value:"3k"},
                {id:4,value:"4k"},
            ],
            maxSalaryOptions:[
                {id:1,value:"7k"},
                {id:2,value:"8k"},
                {id:3,value:"9k"},
                {id:4,value:"10k"},
            ],
            areaOptions:[
                {id:1,value:"贵阳"},
                {id:2,value:"上海"},
                {id:3,value:"北京"},
            ],
            statusOptions:[
                {id:1,value:"在职"},
                {id:2,value:"离职"},
                {id:3,value:"在校生"},
            ],
            dutyTimeOptions:[
                {id:1,value:"随时"},
                {id:2,value:"三天内"},
                {id:3,value:"一周内"},
            ],
            rules:{
                career:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                 
                attribute:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                 
                minSalary:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                 
                maxSalary:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                 
                area:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                 
                status:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                 
                dutyTime:[
                    {  required: true, message: ' ', trigger: 'change' }
                ],                                 
            }

        }
    },
    methods:{
        jump_last(){
            this.$router.push("/infomation2")
        },
        jump_next(form){
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.$store.dispatch('updataForm',this.form)
                    console.log(this.$store.state.form)
                    this.$router.push('/infomation4')
                }else{
                    return false;
                }
            });
        }
    }
}
</script>

<style scoped>

    .infomation3{
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 179, 138, 1);
    }

    .container{
        height: 75%;
        width: 30%;
        border-radius: 4px;
        background-color: white;
    }

    .header_box{
        margin-top: 30px;
        margin-bottom: 25px;
        text-align: left;
    }

    .header_text{
        margin-left: 40px;
        color: rgba(80, 80, 80, 1);
    }

    .content{
        height: 70%;
        width: 100%;
        padding: 0 10%;
    }

    .form{
        margin-top: 60px;
    }

    .form_item{
        margin-bottom: 25px;
    }

    .form_select{
        width: 100%;
    }

    .child_form{
        display: flex;   
    }

    .child_left{
        margin-right: 1%;
    }

    .child_right{
        margin-left: 1%;
    }

    .btn_box{
        height: 9%;
        display: flex;
    }

    .left_btn{
        flex: 1;
    }

    .right_btn{
        flex: 2;
        margin-left: 1%;
    }

    button{
        height: 100%;
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        color: white;
        background-color: rgba(0, 179, 138, 1);
        border: none;
        cursor: pointer;
    }

    .link_text{
        width: 100%;
        text-align: center;
        font-size: 14px;
    }

    a{
        color: rgba(0, 179, 138, 1);
        text-decoration-color: rgba(0, 179, 138, 1);
    }

</style>